<template>
		<appVue>
			<template #sectionContent>
				<div class="content">
				<filesClassify></filesClassify>
				<section class='file_section_new'>
					<div class='file_section_title'>最新上传</div>
					<div class='file_section_newFiles'>
						<filesList :dataList='dataList_New'></filesList>
					</div>
				</section>
				<section>
					<div class='file_section_title'>
						<span class='file_section_h_title'>精品推荐</span>
						<div class='file_section_title_types'>
							<span class='file_section_title_type'  v-for='(item, index) in 5' 
							:class="activeIndex==index?'file_section_title_type_active':''"
							@mouseover="activeTypes(item, index)">办公文档</span>
						</div>
					</div>
					<div class='file_section_recommend'>
						<div class='file_section_bigImg'>
							<filesList :dataList='dataList_New_big'></filesList>
						</div>
					  <div class='file_section_newFiles'>
					  	<filesList :dataList='dataList_New_recommand'></filesList>
					  </div>
					</div>

				</section>
				</div>
			</template>
		</appVue>
</template>

<script>
import appVue from '../app.vue';
import filesClassify from '../components/filesChannel/filesClassify.vue';
import filesList from '../components/filesChannel/filesList.vue';


export default {
  components: {
		appVue,
		filesClassify,
		filesList,
  },
	data(){
		return{
		 dataList_New:15,
		 dataList_New_recommand:15,
		 dataList_New_big:1,
     src:'../img/pic1.jpg',
		 activeIndex:0,
		}
	},
	methods:{
  activeTypes(item, index){
		this.activeIndex = index;
	}
	}
}
</script>

<style>

.file_section_title{
	margin-top: 60px;
	font-size: 30px;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 30px;
	margin-bottom: 24px;
	display: flex;
}

.file_section_new{
	.file_section_newFile:nth-of-type(7n){
		margin-right: 0;
	}
}
.file_section_h_title{
		margin-right:40px;
	}
.file_section_title_types{
	display:flex;
	.file_section_title_type{
		font-size: 16px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-right:40px;
	}
	.file_section_title_type_active{
		border-bottom: 2px solid #FF3333;
		color:#333;
	}
}
.file_section_recommend{
	display: flex;
	width: 1200px;
	justify-content: space-between;
	.file_section_newFiles{
		flex:1;
	}
	.file_section_newFile:nth-of-type(5n){
		margin-right: 0;
	}
	.file_section_bigImg{
		width: 347px;
		
		.file_section_newFiles{
			flex:1;
			width: 347px;
			.file_section_newFile{
				width: 100%;
				.file_section_newFile_img_content{
					width: 100%;
					height:490px;
				}
			}
		}
	
	}

}
</style>
<style>
.mhover:hover {
  color: #Ff3333;
  cursor: pointer;
}
</style>
